<template>
    <div class="GISmap_box">
        <div id="GISmap" ref="GISmap"></div>
        <div class="map_add">
            <el-input v-model="addSearch" placeholder="请输入内容" @input="addressInput" clearable >
                <template #prepend>地址搜索</template>
            </el-input>
            <ul class="map_add_list" v-if="addSearchList.length != 0">
                <li v-for="(addtxt, index) in addSearchList" key="index" @click="addlistButton(addtxt)" >
                    <span>{{ addtxt.name }}</span>
                    <var>{{ addtxt.address }}</var>
                </li>
            </ul>
        </div>
    </div>
</template>
  
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

let Map = null;
let AMap = null;
let mouseTool = null;
let mouseToolBox = null;
let weixinglayer = null;
let zoomCtrl = null;
let controlBar = null;
let districtExplorer = null; // 行政区域
let list2D = null; //围栏列表
let markerList = {};
let fenceInfoList = {};

let tempOverlays = []; // 用于跟踪由mouseTool和districtExplorer添加的临时覆盖物

export default {
name: "GISmap",
data() {
    return {
        mapstate: null,
        weixingState:false,
        zoomCtrlState:false,
        controlBarState:false,
        

        stringLalo:'', // string 保存的字符串
        mapStyle:'',

        fenceShape:null, // circle / polygon
        infoWindow:true, // 信息窗体

        addSearch: null, //搜索地址
        addSearchList: [], //搜索地址列表
    };
},
computed: {
},
components:{

},
created() {
},
mounted() {
    this.fun();
},
methods: {
    fun(){
        console.log('fun fenceMap');
        this.addMapCase();
    },
    //地图搜索input 关键字搜索
    addressInput() {
      if (this.addSearch == "") {
        this.addSearchList = [];
        return;
      }
      console.log(this.addSearch);
      let keyword = this.addSearch;
      AMap.plugin("AMap.PlaceSearch", () => {
        var autoOptions = {
          city: "全国",
        };
        let placeSearch = new AMap.PlaceSearch(autoOptions);
        placeSearch.search(keyword, (status, result) => {
          // 搜索成功时，result即是对应的匹配数据
            if (status === 'complete' && result && result.poiList) {
                this.addSearchList = result.poiList.pois;
                console.log(result.poiList.pois);
            } else if (status === 'USER_DAILY_QUERY_OVER_LIMIT') {
                this.$message.error("今日 关键词搜索 已用完 !~");
            } else {
                this.addSearchList = [];
                console.log('No POI results found');
            }
            });
      });
    },
    // 地址 搜索地图
    addlistButton(address) {
        Map.setZoomAndCenter( 16, [address.location.lng, address.location.lat], true, 3000 );
        this.addSearchList = [];
        this.addSearch = address.name + " " + address.address;
    },

    //加载高德地图
    addMapCase(){
        if(this.mapstate !== null){
            return;
        };
        return new Promise((resolve, reject)=>{
            AMapLoader.load({
                "key": "aa710f496404ee0f3af9f770b8592c73",              // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": '2.0',   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15 "2.0"
                "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等 鹰眼
                AMapUI: {
                    // 是否加载 AMapUI，缺省不加载
                    version: '1.1', // AMapUI 缺省 1.1
                    plugins:['geo/DistrictExplorer'], // 需要加载的 AMapUI ui插件
                },
            }).then((AMaps)=>{
                AMap = AMaps;
                Map = new AMap.Map('GISmap',{  //设置地图容器id
                    viewMode:"3D",    //是否为3D地图模式
                    zoom:5,           //初始化地图级别 5
                    center:[109.699734,31.809243],//mapVuex.mapConfig.center, //初始化地图中心点位置 [109.699734,31.809243] [105.438139,33.125266]
                    mapStyle:'amap://styles/fresh',
                    pitch:0, // 地图俯仰角度，有效范围 0 度- 83 度
                });
                
                this.mapstate = 0;
                // 地图加载完执行
                Map.on("complete", ()=>{

                    /* AMap.plugin(["AMap.MouseTool"], ()=>{ //插件初始化前需要引入的插件
                        //创建MouseTool实例
                        if(!mouseTool){
                            mouseTool = new AMap.MouseTool(Map);
                        };
                    }); */
                    // 引入行政插件
                    /* AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer=> {
                        console.log('初始化 DistrictExplorer 实例  行政UI插件');
                        if(!districtExplorer){
                            districtExplorer = new DistrictExplorer({
                                map: Map // 设置地图实例
                            });
                        };
                    }); */
                    Map.on('click', this.mapButton);
                    resolve('地图加载完执行')
                });
            }).catch(e => {
                console.log('地图加载 报错', e);
                // 销毁地图，并清空地图容器 地图对象被注销，内存释放，地图容器被清空。
                if(Map){
                    if(Map.destroy){
                    Map.destroy();
                    if(this.$refs.GISmap.children.length == 0){
                        console.log("地图为空");
                        setTimeout(()=>{
                        this.mapstate = null;
                        this.addMapCase();
                        }, 3000);
                    };
                    };
                };
            });
        });
    },

    //地图重置
    resettingMap(){
        Map.setZoomAndCenter(5, [109.699734,31.809243], true, 2000); 
    },

    //单个坐标
    setMarker(id){
        Map.setFitView([markerList[id]]);
    },

    mapButton(){
        let center = Map.getCenter(); //获取当前中心点
        let getZoom = Map.getZoom(); //获取当前图层
        let getPitch = Map.getPitch(); //地图俯仰角
        let getRotation = Map.getRotation(); //动画角度
        console.log(center, getZoom, getPitch, getRotation);
    },
},
};
</script>
  
<style lang='scss' scoped>
.GISmap_box, #GISmap{
    position: relative;
    width: 100%;
    height: 100%;
}
.map_add {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  width: 50%;
  max-width: 400px;
  .map_add_list {
    position: absolute;
    top: 40px;
    left: 0;
    list-style: none;
    padding: 5px;
    border: solid 1px #c5c9d7;
    border-radius: 5px;
    background: #fff;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.3);
    width: 100%;
    > li {
        color: #606266;
        font-size: 16px;
        padding:10px 5px;
        border-bottom: dashed 1px #dadff2;
        box-sizing: content-box;
        display: flex;
        line-height: 16px;
        cursor: pointer;
        gap: 5px;
        span {
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            flex-grow:1;
            text-align: left;
        }
        var {
            margin-left: auto;
            padding: 0 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
        }
        i {
            color: #868b97;
            max-width: 30%;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        }
        > li:last-child {
            border-width: 0;
        }
        > li:hover {
            background: #e9ecf5;
        }
    }
}
</style>
<style lang='scss'>
.map_ico{
  position: absolute;
  z-index: 999;
  top:-4px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(45deg, rgb(255, 57, 57) 0%, rgb(255, 0, 0) 100%,);
  border:solid 1px #fff;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
    .map_ico_box {
        position: absolute;
        width: 160px;
        left: -80px;
        bottom: 10px;
        font-size: 0.6em;
        display: flex;
        flex-direction: column-reverse;
    }
    
    .map_ico_title{
        border-radius: 5px;
        background: linear-gradient(135deg, rgba(64, 158, 255) 0%, rgb(62, 142, 223) 100%,);
        color: #fff;
        white-space: normal; /* 确保文本能够换行 */
        padding: 4px;
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
        transition: background-color 600ms ease;
        border:solid 1px rgb(64, 158, 255);
        transition: all 1000ms;
    }
    .map_ico_title:hover{
        transition: all 1000ms;
        transition: background-color 600ms ease;
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.5);
        border:solid 1px rgb(98, 177, 255);
    }
    .map_ico_title_0{
        border-radius: 5px;
        background: linear-gradient(135deg, rgb(188, 198, 207) 0%, rgb(162, 170, 179) 100%,);
        color: #fff;
        white-space: normal; /* 确保文本能够换行 */
        padding: 4px;
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
        transition: background-color 600ms ease;
        border:solid 1px rgb(143, 154, 167);
        transition: all 1000ms;
    }
    .map_ico_title_0:hover{
        transition: all 1000ms;
        transition: background-color 600ms ease;
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.5);
        border:solid 1px rgb(120, 131, 143);
    }
    .map_ico_content{
        width: 100%;
        padding: 4px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 5px;
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1);
        color: #999;
        i{
            padding: 0 4px;
            color: #fff;
            border-radius: 4px;
        }
    }
}
body .amap-ui-control-position-br,body .amap-ui-control-position-rb{
    bottom: 10px !important;
    right: 210px !important;
    position: absolute !important;
}
.map_fence{
    position:absolute;
    left: 0;
    bottom: 0;
    .map_fence_box{
        position: absolute;
        width: 100px;
        left: -50px;
        bottom:0px;
        border:dotted 1px #409eff;
        text-align: center;
        background: rgba(64, 158, 255, 0.7);
        border-radius: 50px;
        font-size: 12px;
        color: #fff;
        opacity: 0.8;
        box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
    }
}
</style>